Ext.namespace('SLM');

SLM.MapPanel = function(config) {

	this.detailsTemplate = new Ext.XTemplate(
		'<div class="details">'
		,	'<tpl for=".">'
			,	'<div class="details-info">'
			,	'<tpl if="title != 0">'
				,	'<b>Name:</b> '
				,	'<span>{title}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="acres != 0"><b>Land Type:</b> <span>{access}</span><br/></tpl>'
//			,	'<span>{[values.private == 0 ? "Public" : "Private"]}</span><br/>'
			,	'<tpl if="acres != 0">'
				,	'<b>Acres:</b> '
				,	'<span>{acres}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="lat != 0">'
				,	'<b>Location:</b> '
				,	'<span>{lat}, {lng}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="county != 0">'
				,	'<b>County:</b> '
				,	'<span>{county}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="town != 0">'
				,	'<b>Town:</b> '
				,	'<span>{town}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="zip != 0">'
				,	'<b>Zip Code:</b> '
				,	'<span>{zip}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="description != 0">'
				,	'<b>Description:</b> '
				,	'<span>{description}</span><br/>'
			,	'</tpl>'
			,	'<tpl if="agency != 0 || firstName != 0 || lastName != 0 || jobTitle != 0 || email != 0 || phone != 0">'
			,		'<b>Contact:</b><br/>'
			,		'<span>{agency}</span><br/>'
			,		'<span>{firstName} {lastName}</span><br/>'
			,		'<span>{jobTitle}</span><br/>'
			,		'<span>{email}</span><br/>'
			,		'<span>{phone}</span><br/>'
			,	'</tpl>'
			,	'</div>'
			,	'</tpl>'
		,	'</div>'
	);
	
	this.proxy ="";
	if (Config.mode == 'local') {
		this.proxy = new Ext.data.HttpProxy({
			url: Config.baseUrl + 'resources/api/app.php'
		});
	} else {
		this.proxy = new Ext.data.ScriptTagProxy({
			url: Config.baseUrl + 'resources/api/app.php'
		})
	}
	
	this.land_store = new Ext.data.JsonStore({
			proxy: this.proxy
		,	baseParams: { cmd: 'land-list' }
		,	root: 'records'
		,	totalProperty: 'total'
		,	id: 'land_id'
		,	fields: [
					'title'
				, 'land_id'
				,	'description'
				,	'private'
				,	'lat'
				,	'lng'
				,	'county'
				,	'town'
				,	'zip'
				,	'acres'
				,	'access'
				,	'firstName'
				,	'lastName'
				,	'agency'
				,	'email'
				,	'phone'
				,	'jobTitle'
			]			
	});
	
	this.map = new Ext.ux.GMapPanel({
			autoShow: true
		,	title: 'Land'
		,	region: 'center'
		,	zoomLevel: 10
		,	id:'gmap'
		,	mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging']
		,	mapControls: ['GSmallMapControl','GMapTypeControl']
		,	setCenter: {
					lat: 48.39
				,	lng: -122.64
			}
	});

	this.info = new Ext.Panel({
			region: 'east'
		,	title: 'Details'
		,	id: 'detail-panel'
		,	width: 300
		, split: true
		,	border: false
		,	autoScroll: true
		,	frame: false
		,	autoLoad: Config.baseUrl + 'resources/docs/property.html'
	});
	
	Ext.apply(this, config, {
			layout: 'border'
		,	hideMode: 'offsets'
		,	id: 'map-panel'
		,	items: [
					this.map
				,	this.info
			]
		,	firstLoad: false
	});

	SLM.MapPanel.superclass.constructor.apply(this, arguments);
	
};

Ext.extend( SLM.MapPanel, Ext.Panel, {

	showDetails : function( data ){
		var detailEl = Ext.getCmp('detail-panel').body;
		this.detailsTemplate.overwrite(detailEl, data);
	}
,	loadMarker: function(){
		if(!this.firstLoad){
			this.land_store.load({
				callback: function( r, opt, success) {
					Ext.each( r, function( rec ) {
						var point = new google.maps.LatLng( rec.json.lat, rec.json.lng);
						var marker = new google.maps.Marker({
								position: point
							, map: Ext.getCmp('gmap').getMap()
							,	record:	rec
							,	flat: true
							,	icon: 'resources/images/icons/garden.png'
						});   
						google.maps.event.addListener(marker, 'click', function(){
							Ext.getCmp('map-panel').showDetails(marker.record.data );
						});
						first = false;
					}, this);
				}
			,	scope: this
		 });
			this.firstLoad = true;
		}
	}	

});